<template>
  <div>
      <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.title}}</div>
        </div>
      </block>
        <div class="navbar_slider" :class="navbarSliderClass"></div>
      </div>
    <swiper class="content" :duration="50" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
      <swiper-item class="content_item">
    <order-list></order-list>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import orderList from '@/components/orderList/orderList'
export default {
  data () {
    return {
      tabs: [
        {title: '全部'},
        {title: '进行中'},
        {title: '已完成'},
        {title: '已取消'}
      ],
      activeIndex: 0,
      currentTab: 0,
      winWidth: 0,
      winHeight: 0
    }
  },
  components: {
    orderList
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '订单管理'
    })
    let res = wx.getSystemInfoSync()
    this.winWidth = res.windowWidth
    this.winHeight = res.windowHeight
  },
  computed: {
    navbarSliderClass () {
      if (this.activeIndex === 0) {
        return 'navbar_slider_0'
      }
      if (this.activeIndex === 1) {
        return 'navbar_slider_1'
      }
      if (this.activeIndex === 2) {
        return 'navbar_slider_2'
      }
    },
    contentHeight () {
      return this.winHeight + 'rpx'
    }
  },
  methods: {
    tabClick (e) {
      this.activeIndex = e.currentTarget.id
      console.log(e)
      this.currentTab = this.activeIndex
    },
    swiperChange (e) {
      this.currentTab = e.mp.detail.current
      console.log(e)
      this.activeIndex = this.currentTab
    },
    onAnimationfinish () {
      console.log('滑动完成.....')
    }
  }
}
</script>

<style scoped>
.tabList{
  line-height: 85rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #bdbdbd;
  font-size: 26rpx;
  box-shadow: 0rpx 5rpx 8rpx #eee;
}
.content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 80rpx;
  -webkit-overflow-scrolling: touch;
}
.content_item{
  display: flex;
  flex-direction: column;
  align-items:center;
}
.navbar {
  display: flex;
  position: fixed;
  z-index: 500;
  top: 0;
  height: 80rpx;
  width: 100%;
  border-bottom: 1rpx solid #ccc;
}
.navbar_item {
  position: relative;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  padding: 13rpx 0;
  text-align: center;
  font-size: 0;
}
.navbar_item .navbar_item_on {
  color: #eb493c;
}
.navbar_title {
  color: #3b3b3b;
  font-weight: 500;
  display: inline-block;
  font-size: 28rpx;
  max-width: 8em;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.navbar_item_on ::after{
  content: " ";
  width: 60%;
  display: block;
  border-radius: 4rpx;
  height: 4rpx;
  margin: 28rpx auto 0 auto;
  background-color: #eb493c;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
</style>
